import { Button, Col, Empty, Row, Spin } from 'antd';
import { useContext, useEffect } from 'react';
import { IAuthFirstSteps } from '../../type';
import { AuthorizationContext, getResource } from '../AuthHooks';
import { AuthFirstLeftTree } from './AuthFirstLeftTree';
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons';
import { AuthFirstRightList } from './AuthFirstRightList';
import { loopArray, loopArrayChildren, toTree } from '@/utils';

export const AuthFirstSteps: React.FC<IAuthFirstSteps> = ({
  stepType,
  firstCheckID,
  firstCheckRows,
}) => {
  const {
    prefixCls,
    leftTreeCheckRows,
    authGranDispatch,
    roleAuthDetailInfo,
  } = useContext(AuthorizationContext); //获取 上下文
  const { roleDataList, roleDataLoading } = getResource(stepType); //获取资源菜单信息

  // 全选和反选
  const selectReverseAll = (type: string) => {
    if (type == 'AllSel') {
      //全选
      let leftTree = loopArrayChildren(roleDataList);
      let leftKeys: any[] = [];
      leftTree?.forEach((item) => {
        leftKeys?.push(item?.id);
      });
      authGranDispatch({
        type: 'authGran-leftSelectKeys',
        payload: leftKeys,
      });
      authGranDispatch({
        type: 'authGran-leftTreeCheckRows',
        payload: leftTree,
      });
    } else if (type == 'AllRev') {
      authGranDispatch({
        type: 'authGran-leftSelectKeys',
        payload: [],
      });

      authGranDispatch({
        type: 'authGran-leftTreeCheckRows',
        payload: [],
      });
    }
  };

  // 初始化数据
  useEffect(() => {
    if (stepType == 'roleMenu') {
      let menuDefaultTree = toTree(roleAuthDetailInfo?.paramObject?.menu);
      let rightCheckRows =
        roleAuthDetailInfo?.paramObject?.menu?.length > 0
          ? loopArrayChildren(menuDefaultTree)
          : [];
      let leftIDS =
        rightCheckRows?.length > 0 ? handLeftCheckID(rightCheckRows) : [];
      authGranDispatch({
        type: 'authGran-leftSelectKeys',
        payload: firstCheckID ? firstCheckID : leftIDS,
      });
      authGranDispatch({
        type: 'authGran-leftTreeCheckRows',
        payload: firstCheckRows ? firstCheckRows : rightCheckRows,
      });
    }
  }, [roleAuthDetailInfo?.id, stepType]);

  // 处理一二三步左侧树选中的id
  const handLeftCheckID = (list: any[]) => {
    let idS: any[] = [];
    list?.forEach((item: any) => {
      if (item?.id) {
        idS?.push(item?.id);
      }
    });
    return idS;
  };

  return (
    <Row
      style={{ margin: '10px 20px', height: '100%', overflow: 'hidden' }}
      className={prefixCls + 'step-cardRole'}
    >
      {roleDataLoading ? (
        <div style={{ width: '100%', height: '100%', paddingTop: '10%' }}>
          <Spin spinning={true}>
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </Spin>
        </div>
      ) : (
        <>
          <AuthFirstLeftTree firstMenuList={roleDataList} />
          <Col span={2}>
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                height: '100%',
              }}
            >
              <Button
                type={
                  leftTreeCheckRows?.length == loopArray(roleDataList)?.length
                    ? 'dashed'
                    : 'primary'
                }
                style={{ marginBottom: 10 }}
                onClick={() => {
                  selectReverseAll('AllSel');
                }}
              >
                <DoubleRightOutlined />
              </Button>
              <Button
                type={
                  leftTreeCheckRows?.length == loopArray(roleDataList)?.length
                    ? 'primary'
                    : 'dashed'
                }
                onClick={() => {
                  selectReverseAll('AllRev');
                }}
              >
                <DoubleLeftOutlined />
              </Button>
            </div>
          </Col>
          <AuthFirstRightList firstMenuList={roleDataList} />
        </>
      )}
    </Row>
  );
};
